import React, { Component } from 'react';
import LoginStyleComp from './LoginStyleComp.js'
import {NavLink} from 'react-router-dom'
class Login extends Component {
    constructor(props) {
        super(props);
        this.state = { 

         };
    }

   LoginClick = () =>{

    const username = this.users.value;
    const password = this.password.value;
    let  ls_users = localStorage.getItem('users');

    if(ls_users){
       //如果ls_users存在证明已有用户注册,判断密码，用户名是否正确
       ls_users = JSON.parse(ls_users)
       
       if(ls_users.username===username&&ls_users.password===password){
          alert('登录成功')
          this.props.history.push('/home')
       }else{
          alert('用户未注册，请点击确认直接注册账号')
       }

    }else{
       //没有用户注册，直接保存到本地存储
       localStorage.setItem('users',JSON.stringify({username,password}))
       this.props.history.push('/home')
    }
 }
    render() {
        return (
            <LoginStyleComp>
             <div className='zhuce'>
                <header className='userTop'>
                        <NavLink to='mine' id='t-goback'>
                        <i className="fa fa-angle-left" aria-hidden="true"></i>
                        </NavLink>
                        <span className='geren'>用户登录</span>
                        <NavLink to='/register' className='go-zhuce'>注册</NavLink>
                </header>
                 
                <form className="sui-form form-horizontal">
                    <div className="control-group">
                        <p className="reg-notice">卷皮账号登录</p>
                        <div>
                        <input 
                        type="text" id="inputEmail" placeholder="请输入用户名"
                        ref= {el=>this.users=el}
                        />
                        </div>
                    </div>
                    <div className="control-group">
                        <div>
                        <input 
                        type="password" id="inputPassword" placeholder="请输入密码"
                        ref= {el=>this.password=el} 
                        />
                        </div>
                    </div>
                    <div className="control-group">
                        <label className="control-label"></label>
                        <div className="controls">
                        <NavLink 
                        to='/home' className="sui-btn btn-primary"
                        onClick= {this.LoginClick}
                        >登录</NavLink>
                        </div>
                    </div>
                    </form>
              </div> 
            </LoginStyleComp>
        );
    }
    
}

export default Login;